<template>
	<view class="main">

		<delVue :Visible="isdel" @isModal="gomodal" @goStay="gostay" :oneText="one" :twoText="two"
			:threeText="threeText" :fourText="four" />

		<u-popup v-model="isshow" mode="bottom" :closeable="true" border-radius="24" height="600rpx">
			<view class="pop-tit pop-bor">
				选择退款原因
			</view>
			<scroll-view class="popup-box popup-boxTwo" scroll-y="true">
				<view class="refundBox" v-for="(item, index) in refundData" :key="item.id">
					<view>{{ item.title }}</view>
					<view :class="['checkbox', { selected: index==isRefund }]" class="checkbox"
						@click="toggleItemSelection(item, index)">
						<image v-if="index==isRefund" :src="bg" mode=""></image>
						<!-- <u-icon v-if="index==isRefund" color="#fff" size="32" name="checkmark"></u-icon> -->
					</view>
					<!-- 展示退款原因名称 -->
				</view>
			</scroll-view>
			<view class="refund-btn">
				<view class="butt butts" @click="confirmRefund">
					确定退款
				</view>
				<view class="butt " @click="thinkAgain">
					我再想想
				</view>

			</view>
		</u-popup>
		<view class="title">
			<view class="bg" :class="title != '' ? 'bg-color' : ''">

				<u-icon @click="goBack" size="36" name="arrow-left"></u-icon>
				<text>{{title}}</text>
				<view class="">
				</view>
			</view>
			<!-- 这是搜索订单，后续可能启用 -->
			<!-- <view class="search">

				<image src="../../static/home/seach.png" mode=""></image>
				<input v-model="keyword" type="text" class="search-input" @keyup.enter="searchData" @input="searchData"
					placeholder="根据姓名、科室找医生" />
				<view class="icon-del" @click="del" v-if='keyword!=""'>
					<u-icon size="34" name="plus-circle"></u-icon>
				</view>
				<view class="vertical">
				</view>
				<view @tap="searchData" class="search-btn">
					搜索
				</view>
			</view> -->

			<view class="tabs-box">
				<u-tabs bar-width='100' inactive-color="#808080" bar-height="4" active-color="#CCA566" :list="list"
					:is-scroll="false" :current="current" @change="change" :style="{ backgroundColor: '#F5F3F0' }"></u-tabs>
			</view>
		</view>
		<view class="box" v-if="token">
			<view class="" v-if="register.length>0">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
					<view class="client" v-for="(item,index) in register" @click.top="viewOrderDetails(item,index)">
						<view class="client-tit">
							<view class="tit">
								<text>中医健康产品</text>

							</view>
							<view
								:class="item.status == 200 || item.status == 103 ||item.status == 104 ? 'success-text' : (item.status == 100 ? 'paid-text' : (item.status == 300 ? 'gray-text' : 'paid-text'))">
								{{regListStatus(item.status)}}
							</view>
						</view>
						<view class="client-con">
							<view class="cart-item" v-for="(it,ind) in item.goodsOrderDetails">
								<image v-if="it.goods.photoUrl" :src="it.goods.photoUrl" class="item-image" mode=""></image>
								<!-- <image :src="item.image" class="item-image" /> -->
								<view class="actions-main">
									<view class="item-details">
										<view>{{it.goods.title}}</view>
									</view>
									<view class="main-item">
										<view class="box-text">
											￥
											<text>{{it.goods.price || 0}}</text>
										</view>

										<view class="box-text all-text">
											x
											<text class="all-text">{{it.count}}</text>
										</view>
									</view>
								</view>

							</view>
							<!-- 这里判断的是选择售后后展示的东西 -->
							<view class="tui" v-if="current==4">
								仅退款 <text>退款成功</text>
							</view>
							<!-- 这里判断的是非售后的东西 -->
							<view class="cart-bot" v-if="current!=4">
								<view class="bot-item" v-if="item.totalPrice<1000 && item.zt!=1">
									含运费￥{{freight[1].dictValue}}
								</view>
								<view class="bot-item" v-if="item.totalPrice>1000 && item.zt!=1">
									免运费
								</view>
								<view class="bot-item" v-if=" item.zt==1">
									到院领取
								</view>
								<view class="box-text">
									实付款￥
									<text>{{item.totalPrice || 0}}</text>
								</view>
							</view>

						</view>
						<view class="con-bot">
							<view class="btn btn-color" @click.stop="cancelOrder(item,index)" v-if="item.status==100">
								取消订单
							</view>

							<view class="btn btn-color" @click.stop="doitAgain(item,index)" v-if="item.status!=100">
								再来一单
							</view>
							<!-- <view class="btn " @click.stop="viewOrderDetails(item,index)" v-if="item.status==104">
								售后详情
							</view> -->
							<!-- <view class="btn" @click.stop="viewOrderDetails(item,index)" v-if="item.status==107">
								查看物流
							</view> -->

							<view class="bot-btn" v-for="(it,ind) in status" :key="index">
								<view class="btn-le" v-if="item.status==it.dictValue && it.dictLabel!='已取消'">
									<view class="btn btn-colors"  @click.top="handleStatusChange(item.status,item)" plain="true" v-if="it.dictLabel != '待发货'">
										{{it.dictLabel == '待发货' ? '申请退款' : it.dictLabel == '已发货' ? '确认收货' : (it.dictLabel == '退款中' || it.dictLabel == '已退款' ? '售后详情' : it.dictLabel)}}
									</view>
									
									<!-- <u-button @click.top="handleStatusChange(item.status,item)" plain="true" v-if="it.dictLabel != '待发货'"
										:type="it.listClass"
										size="medium">{{it.dictLabel == '待发货' ? '申请退款' : (it.dictLabel == '退款中' || it.dictLabel == '已退款' ? '售后详情' : it.dictLabel)}}</u-button> -->
								</view>
							</view>


						</view>

					</view>
				</scroll-view>
			</view>
			<view class="no-empty" v-else>
				<u-empty text="暂无订单" mode="list"></u-empty>
			</view>
		</view>
		<view class="notlogin" v-else @click="login">
			<view class="">
				你还未登录
			</view>
			<view class="">
				去登录
			</view>
		</view>

	</view>


</template>

<script>
	import config from "../../utils/config";
	import {
		toast,
		getStore
	} from "../../utils";
	import delVue from '../../components/del.vue';
	import {
		getregistration,
		goodsConfirm,
		applyGoods,
		delgoodsOrder,
		goodsOrderList,
		setGoodspay
	} from '../../service/api.js'
	export default {
		components: {
			delVue
		},
		data() {
			return {
				bg: config.ossHost + '2025/01/03/b7e97ec044a3427180a2b3d13ffb10b2.png',

				isdel: false,
				isshow: false,
				one: "再想想",
				two: "确定取消",
				three: "是否申请退款，退款申请提交，审批通过进行退款",
				four: "提示",
				freight: [],

				threeText: "是否取消此订单",


				title: "",
				keyWord: "",
				list: [{
						name: '全部',
						status: ""
					}, {
						name: '待付款',
						status: "100"
					},

					{
						name: '待收货',
						status: "107"
					},
					{
						name: '待评价',
						status: "105"
					},
					{
						name: '退款',
						status: "103,104"
					},
					// {
					// 	name: '售后',
					// 	status:""
					// },
				],
				refundData: [{
						title: "我不想要了",
						selected: false,
					},
					{
						title: "收货地址信息填写错误",
						selected: false,
					},
					{
						title: "商品缺货",
						selected: false,
					},
					{
						title: "其他",
						selected: false,
					}
				],
				isRefund: 0,
				register: [],
				delId: "",
				//请求挂号订单参数
				params: {
					// memberId: "",
					status: "",
				},
				status: [{
						status: 100,
						dictLabel: '待付款'
					},
					{
						status: 101,
						dictLabel: '待发货'
					}
				],
				refundParams: {
					id: "",
					refundCause: ""
				},
				current: 0,
				token: ""
			}
		},
		computed: {

		},
		onShow() {
			this.token = getStore("token") || null;


		},
		onLoad(options) {

			this.getcarriage();

			if (options.status) {
				this.title = "全部订单"
			} else {
				this.title = this.list[options.status].name;
			}
			this.params.status = this.list[options.status].status;
			this.current = options.status;
			this.getStatus();
			this.getOrderList()



		},
		methods: {
			//获取运费价格
			async getcarriage() {
				let res = await getregistration("carriage");
				if (res.code == 200) {
					this.freight = res.rows;
				}
			},
			//返回我的页面
			goBack() {
				uni.switchTab({
					url: "/pages/my/index"
				})
			},

			//再来一单
			doitAgain(item) {

				uni.navigateTo({
					url: `/integration/productList/index?id=${item.goodsOrderDetails[0].goodsId}`
				})
			},
			//确认退款
			confirmRefund() {

				this.refundParams.refundCause = this.refundData[this.isRefund].title;
				this.refundOrder()

			},
			toggleItemSelection(item, index) {
				this.isRefund = index;

			},
			//退款
			async refundOrder() {
				let res = await applyGoods(this.refundParams);
				if (res.code == 200) {
					toast("已申请");
					this.isshow = false;
					this.getOrderList();

				} else {
					toast("申请失败");
					this.isshow = false;
				}
			},



			//我再想想
			thinkAgain() {
				this.isshow = false;
			},
			login() {
				uni.navigateTo({
					url: `/My/oneClicklogin/login`
				})
			},
			searchData() {
				if (this.keyWord == "") {
					return
				}
			},

			lower() {},
			// 查看订单详情
			viewOrderDetails(item, index) {

				item.title = this.regListStatus(item.status);
				uni.navigateTo({
					url: `/integration/confirmOrder/index?id=${item.id}&totalPrice=${item.totalPrice}&order=true&statusValue=${item.status}`
				})
			},
			handleStatusChange(statusValue, item) {

				switch (statusValue) {
					//待支付
					case '100':
						this.doSomethingForStatus1(item);
						break;
						//待发货
					case '101':
						this.doSomethingForStatus2(item);
						break;
						//待评价
					case '105':
						this.doSomethingForStatus3(item);
						break;

						//已完成
					default:
						this.viewOrderDetails(item)
						console.log('未知状态');
						break;
				}
			},

			gomodal(item) {
				this.isdel = item;
			},
			//这里执行退号操作
			gostay(item) {
				this.delOrder(this.delId)
				this.isdel = item;

			},


			//取消订单
			cancelOrder(item, index) {
				this.isdel = true;
				this.delId = item.id
			},

			//删除订单
			async delOrder(ids) {
				let res = await delgoodsOrder(ids);
				if (res.code == 200) {
					toast("取消成功");
					this.getOrderList();

				} else {
					toast("取消失败");
				}
			},

			regListStatus(item) {

				// 假设status是一个包含字典项的数组，查找与item匹配的status项
				let statusItem = this.status.find(s => s.dictValue == item); // 查找与item匹配的状态
				return statusItem ? statusItem.dictLabel : '未知状态'; // 返回状态标签，如果没有匹配项则返回'未知状态'
			},

			//申请退款
			doSomethingForStatus2(item) {
				// 这里是进退款详情页面,之后需要用开启就可以了
				// item.title = this.regListStatus(item.status);
				// uni.navigateTo({
				// 	url: `/My/refundApplication/index?id=${item.id}&totalPrice=${item.totalPrice}&order=true&statusValue=${item.status}`
				// })
				this.refundParams.id = item.id
				this.isshow = true;
			},
			//待评价
			doSomethingForStatus3(item) {
				this.evaluate(item)
			},
			//评价
			evaluate(item) {
				uni.navigateTo({
					url: `/integration/evaluate/index?orderDetails=${JSON.stringify(item)}`
				})
			},

			change(index) {
				this.params.status = this.list[index].status;
				this.title = this.list[index].name;
				this.getOrderList();
				this.current = index;


			},
			//获取商城列表
			async getOrderList() {
				let res = await goodsOrderList(this.params);
				if (res.code == 200) {
					this.register = res.rows;

				}
			},

			//获取商城订单状态
			async getStatus() {
				let res = await getregistration("commodity_status");
				if (res.code == 200) {
					this.status = res.rows;
					// consoloe.log(this.status, )
				}
			},
			async paySign(index, item) {
				console.log(item, "11111111")
				if (index == "1") {
					toast("支付宝支付暂未开放");
					return;
				}

				try {
					let params = {
						payType: index, // 支付类型 1:支付宝 2:微信
						orderNo: item.orderNumber,
					};

					let res = await setGoodspay(params);
					if (!res || !res.data) {
						toast("支付请求失败，请稍后再试");
						return;
					}

					if (res.message == "未绑定微信！") {
						this.payBtnFlag = false;
						toast(res.message);
						setTimeout(() => {
							uni.navigateTo({
								url: "/My/setting",
							});
						}, 1500);
						return;
					}

					let data = res.data;
					uni.requestPayment({
						provider: index === "1" ? "alipay" : "wxpay", // 动态选择支付提供商
						timeStamp: data.timeStamp,
						nonceStr: data.nonceStr,
						package: data.package,
						signType: data.signType,
						paySign: data.paySign,
						success: (res) => {
							if (res.errMsg === "requestPayment:ok") {
								toast("支付成功，耐心等候");

								// uni.redirectTo({
								// 	url: '/integration/paymentSuccess/index'
								// });
							}
						},
						fail: (err) => {
							toast("支付失败");
							setTimeout(() => {
								// 可以跳转到订单详情或其他失败处理页面
								// uni.navigateTo({
								//   url: `/My/register?index=${this.orderStatus.unpaid}&backType=payment`,
								// });
							}, 1500);
						},
					});

				} catch (error) {
					console.error("支付请求失败:", error);
					toast("支付失败，请稍后再试");
				}
			},

			doSomethingForStatus1(item) {
				this.paySign(2, item); // 假设需要传递支付类型2（微信支付）
			}
		},
	}
</script>

<style lang="scss" scoped>
	.main {
		padding-top: 293rpx;
	}

	.title {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;

		background: #fff;

		.search {
			width: 654rpx;
			padding: 0 24rpx;
			height: 64rpx;
			background: #F5F3F0;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			margin-left: 24rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.icon-del {
				transform: rotate(45deg);
			}

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 10rpx;
			}

			input {
				font-size: 24rpx;
				width: 525rpx;
			}

			.vertical {
				height: 25rpx;
				border-left: 1rpx solid;
				margin: 0 20rpx;

			}

			.search-btn {
				font-size: 24rpx;
				color: #4D4D4D;
				width: 72rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				background: #F5F3F0;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
			}
		}
	}

	.notlogin {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: calc(100vh - 370rpx);

		view {
			color: #B3B3B3;
		}

		view:last-child {
			width: 140rpx;
			margin-top: 20rpx;
			border-radius: 8rpx;
			padding: 12rpx 0;
			text-align: center;
			color: #fff;
			background: #CCA566;
		}
	}

	.box {
		.scroll-Y {
			height: calc(100vh - 360rpx);
		}

		.client {
			width: 654rpx;
			background: #fff;
			padding: 24rpx;
			border-radius: 16rpx;
			margin: auto;
			// margin-top: 24rpx;
			margin-bottom: 24rpx;

			.cart-bot {
				display: flex;
				justify-content: flex-end;
				align-items: flex-end;

				.bot-item {
					font-size: 24rpx;
					color: #808080;
				}

				.box-text {
					margin-left: 10rpx;
					font-size: 24rpx;

					text {
						font-weight: bold;
						font-size: 26rpx;
					}
				}
			}

			.cart-item {

				background: #FFFFFF;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				padding: 24rpx 0;
				// margin-bottom: 24rpx;

				.item-image {
					width: 140rpx;
					height: 140rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					margin-right: 16rpx;
				}

				.actions-main {
					height: 140rpx;
					width: 500rpx;
					display: flex;
					justify-content: space-between;

					.item-details {
						view {
							width: 380rpx;
							display: -webkit-box;
							/* 设为 flexbox 布局 */
							-webkit-box-orient: vertical;
							/* 必须设置为垂直排列 */
							overflow: hidden;
							/* 隐藏超出的内容 */
							-webkit-line-clamp: 2;
							/* 限制显示的行数为 2 行 */
							text-overflow: ellipsis;
							/* 超出部分显示省略号 */
						}

					}

					.main-item {
						display: flex;
						flex-direction: column;
						align-items: flex-end;
						justify-content: space-between;

						.box-text {

							font-weight: bold;
							font-size: 24rpx;

							text {}
						}

						.all-text {
							font-size: 28rpx;
							font-weight: 200;
							color: #808080;

						}
					}
				}

			}

			.client-tit {
				display: flex;
				justify-content: space-between;

				.tit {
					font-weight: bold;
				}

			}

			.con-bot {
				display: flex;
				justify-content: flex-end;
				margin-top: 20rpx;

				.bot-btn {
					display: flex;

					.btn-le {
						margin-left: 20rpx;
					}



				}

				.btn {
					margin-left: 24rpx;
					width: 144rpx;
					height: 56rpx;
					text-align: center;
					line-height: 56rpx;
					font-size: 24rpx;
					color: #CCA566;
					border-radius: 10rpx;
					border: 1rpx solid #CCA566;
				}

				.btn-color {
					color: #1A1A1A;
					border: 1rpx solid #E6E6E6;
				}
				.btn-colors {
					color: #CCA566;
					margin-left: 0;
					border: 1rpx solid #CCA566;
				}
			}

			.client-con {
				.tui {

					font-size: 24rpx;
					color: #808080;
					width: 634rpx;
					padding-left: 20rpx;
					height: 64rpx;
					line-height: 64rpx;
					background: #F5F3F0;
					border-radius: 8rpx 8rpx 8rpx 8rpx;

					text {
						margin-left: 10rpx;
						color: #FF7C54;
					}
				}

				.con-top {
					display: flex;
					align-items: center;
					padding: 24rpx 0;
					border-bottom: 1rpx solid #E6E6E6;

					image {
						width: 80rpx;
						height: 80rpx;
						margin-right: 16rpx;
					}



				}

				.con-con {
					padding: 24rpx 0;
					border-bottom: 1rpx solid #E6E6E6;

					.one {
						display: flex;
						justify-content: space-between;
						font-size: 24rpx;
						color: #808080;
						margin-bottom: 10rpx;

						.on-le {}

						.one-ri {
							color: #1A1A1A;
							font-weight: bold;
						}

						.one-color {
							color: #CCA566;
						}
					}

					.one:last-child {
						margin-bottom: 0;
					}
				}
			}
		}
	}

	::deep.u-size-medium {
		height: 60rpx !important;
		line-height: 60rpx !important;
		padding: 0 40rpx !important;
	}

	button {
		border-radius: 0 !important;
	}



	.popup-box {
		.refundBox {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 24rpx;
			font-size: 24rpx;
			border-bottom: 1rpx solid #E6E6E6;

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}

		.refundBox:last-child {
			border-bottom: none;
		}



	}

	.pop-tit {
		text-align: center;
		padding: 40rpx 0;
		font-size: 32rpx;
		color: #1A1A1A;
		border-bottom: 1rpx solid #E6E6E6;

	}

	.popup-box {
		.refundBox {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 24rpx;
			font-size: 24rpx;
			border-bottom: 1rpx solid #E6E6E6;
		}

		.refundBox:last-child {
			border-bottom: none;
		}


	}

	.checkbox {
		width: 30rpx;
		height: 30rpx;
		border: 1rpx solid #ccc;
		border-radius: 50%;
		margin-right: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		cursor: pointer;
		background-color: white;
	}

	.checkbox.selected {
		border: 1rpx solid #CCA566;
		background-color: #CCA566;
	}

	.item-image {
		width: 180rpx;
		height: 180rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-right: 16rpx;
	}

	.refund-btn {
		width: 702rpx;
		height: 80rpx;
		margin: auto;
		margin-top: 15rpx;
		display: flex;
		justify-content: space-between;

		.butt {
			width: 339rpx;
			height: 80rpx;
			border-radius: 8rpx;
			background: #CCA566;
			color: #FFFFFF;
			text-align: center;
			line-height: 80rpx;
		}

		.butts {
			color: #CCA566;
			background: #fff;
			border: 2rpx solid #CCA566;
		}
	}




	.bg {
		width: 100%;
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 24rpx;
		padding-top: 65rpx;


		.title-img {
			width: 100rpx;
		}

		text {
			display: inline-block;

			color: #1a1a1a;
			font-size: 32rpx;
			font-weight: bold;
		}

		view {
			width: 100rpx;
		}
	}

	.no-empty {
		height: calc(100vh - 400rpx);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.paid-text {
		color: #FF7C54;
	}

	.gray-text {
		color: #B3B3B3;
	}
	::deep.u-tab-bar{
		bottom: -4rpx !important;
	}
	
</style>